<template>
    <el-dialog
            title="添加商品分类"
            :visible.sync="message"
            :show-close="false"
            @close="resetInfo"
            width="40%">
        <!--        内容-->
        <span>
            <el-form ref="shopCateRef" :model="addCateInfo" label-width="80px" :rules="shopRules">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="addCateInfo.cat_name"></el-input>
                </el-form-item>
                 <el-form-item label="父级分类">
<!--                     级联选择器-->
                   <el-cascader
                           v-model="selectedKeys"
                           :options="shopCate12List"
                           :props="cascaderProps"
                           :clearable="true"
                           @change="handleChange">
            </el-cascader>
                </el-form-item>
            </el-form>
        </span>
        <!--        对话框底部-->
        <span slot="footer" class="dialog-footer">
            <el-button @click="quit">取 消</el-button>
            <el-button type="primary" @click="addShopCate">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import {addShopCateData} from "../../../network/goods";

    export default {
        name: "AddShopCate",
        props:{
            message:{
                type:Boolean,
                default(){
                    return false
                }
            },
            shopCate12List:{
                type:Array,
                default() {
                    return [];
                }
            }
        },
        data(){
            return{
                addCateInfo:{
                    cat_name:'',
                    cat_pid:0,
                    cat_level:0
                },
                selectedKeys:[],
                cascaderProps:{
                    value:'cat_id',
                    label:'cat_name',
                    children:'children',
                    expandTrigger: 'hover',
                    checkStrictly:'true'//设置选择任意一级选项
                },
                shopRules:{
                    cat_name:[{required:true,message:'请输入名称'}]
                }
            }
        },
        methods:{
            quit(){
                this.$bus.$emit('addShopCate')
            },
            //添加商品分类
            addShopCate(){
                //发送请求网络，添加数据
                addShopCateData(this.addCateInfo).then(res => {
                    if(res.data.meta.status !== 201){
                        this.$message.error(res.data.meta.msg)
                    }
                    this.$message.success(res.data.meta.msg);
                    this.$bus.$emit('getShopCateInfo')
                });

                this.$bus.$emit('addShopCate')
            },
            //关闭对话框时，重置表单
            resetInfo(){
                this.$refs.shopCateRef.resetFields();
                this.selectedKeys = [];
                this.addCateInfo.cat_pid = 0;
                this.addCateInfo.cat_level = 0
            },
            handleChange(){
                //获取父级id和等级level
                if(this.selectedKeys.length > 0){
                    this.addCateInfo.cat_pid = this.selectedKeys[this.selectedKeys.length-1];
                    this.addCateInfo.cat_level = this.selectedKeys.length;
                }else{
                    this.addCateInfo.cat_pid = 0;
                    this.addCateInfo.cat_level = 0
                }
            }
        }
    }
</script>

<style scoped lang="less">

</style>